<template>
  <div class="navbar-container">
    <div class="navbar-container-left">
      <div @click="handleBack">
        <i class="el-icon-back"></i>
        <span>{{ $t('common.base.back') }}</span>
      </div>
      <span>{{ templateName }}</span>
      <!-- <i class="iconfont icon-edit-fill"></i> -->
    </div>
    <div class="navbar-container-center">
      <span
        v-for="item in navBarList"
        :class="item.index === navIndex ? 'active' : ''"
        :key="item.index"
        @click="handleNavBarClick(item.index)"
        >{{ item.label }}</span
      >
    </div>
    <div class="navbar-container-right">
      <el-button
        class="btn-save"
        :loading="saveLoading"
        @click="handleSave(false)"
        >{{ $t('common.base.save') }}</el-button
      >
      <el-button
        class="navbar-right-button"
        :loading="releaseLoading"
        @click="handleSave(true)"
        >{{ $t('common.base.release') }}</el-button
      >
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import i18n from '@src/locales';

export default {
  props: {
    templateName: {
      type: String,
      default: '',
    },
    navIndex: {
      type: Number,
      default: 1,
    },
    typeId: {
      type: String,
      default: '',
    },
  },
  emits: ['handleToggleNav', 'save'],
  setup(_, { emit }) {
    const navBarList = [
      { label: i18n.t('portal.portalConfig'), index: 1 },
      { label: i18n.t('portal.portalStyle'), index: 2 },
    ];

    const saveLoading = ref(false);
    const releaseLoading = ref(false);

    const handleNavBarClick = index => {
      emit('handleToggleNav', index);
    };

    const handleBack = () => {
      emit('back');
    };

    const handleSave = (isRelease = false) => {
      if (isRelease) {
        releaseLoading.value = true;
      } else {
        saveLoading.value = true;
      }
      emit('save', isRelease);
      sessionStorage.setItem('_doorId', _.typeId);
    };

    return {
      saveLoading,
      releaseLoading,
      navBarList,
      handleNavBarClick,
      handleSave,
      handleBack,
    };
  },
};
</script>

<style lang="scss" scoped>
@import '../index';

.navbar-container {
  @include box-setting(100%, 50px, $color-primary-light-6);
  display: flex;
  justify-content: space-between;
  align-items: center;

  &-left {
    display: flex;
    align-items: center;
    @include font-setting(16px, 400, #ffffff, 22px);

    div {
      width: 86px;
      height: 50px;
      border-right: 1px solid #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 12px;
      @include font-setting(16px, 400, #ffffff, 20px);
      cursor: pointer;

      i {
        margin-right: 5px;
      }
    }

    span + i {
      margin-left: 10px;
      cursor: pointer;
      font-size: 15px;
    }
  }

  &-center {
    width: auto;
    height: 100%;
    display: flex;
    @include font-setting(16px, 400, #ffffff, 22px);

    span {
      @include box-setting(112px, 100%, transparent);
      display: block;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }

    span.active {
      background: rgba(0, 0, 0, 0.1);
    }
  }

  &-right {
    margin-right: 24px;

    .navbar-right-button {
      margin-left: 8px;
      @include font-setting(14px, 400, #ffffff);
      @include box-setting(80px, 32px, #ffac00, 4px);
      border-color: #ffac00;
    }

    .btn-save {
      margin-right: 12px;
      @include font-setting(14px, 400, #ffffff);
      @include box-setting(80px, 32px, $color-primary-light-6, 4px);
      border-color: #ffffff
    }
  }
}
</style>
